<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 500px;
            margin: 100px auto;
            position: relative;
            border: 1px solid lightblue;
        }
        .box img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            opacity: 0;
            transition: opacity 0.2s;
        }
        .box img.show{
            opacity: 1;
        }

        .start{
            position: fixed;
            left: 50%;
            top: 20px;
            transform: translateX(-50%);
            cursor: pointer;
            border: 1px solid dashed;
            padding: 20px 40px;
            background-color: lightblue;
            border-radius: 25px;
        }
        .start.disabled{
            background-color: lightslategrey;
            cursor:no-drop;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="start">start_zzx</div>
    <script type="text/javascript">
        const srcArr = [
            './assets/1.jpeg',
            './assets/2.jpg',
            './assets/3.jpg',
            './assets/4.jpeg',
            './assets/5.jpg'
        ]
        const box = document.querySelector('.box')
        const start = document.querySelector('.start')
        const interval = 500
        const imageElements = []
        let index = 1
        let isStart = false
        let timer = null

        srcArr.forEach((src)=>{
            const img = new Image()
            imageElements.push(img)
            img.src = src
            box.appendChild(img)
        })

        const setStartBtnAvailable = (isAvailable)=>{
            if(isAvailable){
                start.classList.remove('disabled')
                start.innerText = 'start_zzx'
            }
            else{
                start.classList.add('disabled')
                start.innerText = 'playing...'
            }
        }

        const setActiveStatus = (index,isActive)=> imageElements[index].className = isActive ? 'show' : ''
        setActiveStatus(0,true)

        const animationProcess = ()=>{
            if(index===imageElements.length){
                   clearInterval(timer)
                   isStart = false
                   index = 0
                   setActiveStatus(0,true)
                   setActiveStatus(imageElements.length-1,false)
                   setStartBtnAvailable(true)
                   return
               }
               setActiveStatus(index,true)
               index > 1 && setActiveStatus(index-1,false)
               index++
        }

        start.addEventListener('click',()=>{
            if(isStart){
                return
            }
           isStart = true
           setStartBtnAvailable(false)
           timer =  setInterval(animationProcess,interval)
           animationProcess()
        })
    </script>
</body>
</html>